<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<!-- version: $Id$ -->
<html><head>
  <title>Tumblr Backup</title>
  <style type="text/css">
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 90%;
    }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="backup.js"/></script>
  <script type="text/javascript">
    $(document).ready(function()
    {
      $('head title').html('Backup '  + data.blog.title);
      $('body h1').html('Tumblr backup of <a hreF="' + data.blog.url + '">' + data.blog.title + '</a>');
      html = '';
      for(i=0; i<data.posts.length; i++) {
        html += '<li data-index="' + i + '" id="'+ data.posts[i].id + '" class="post"><a href="' + 
          data.posts[i].url + '">#' + data.posts[i].id + '</a> on ' + data.posts[i].date + ', <b>' +
          data.posts[i].bu_photos.length  + '</b> photos' +
          '<div class="photos" style="display:none" id="' + data.posts[i].id + 'p"></li>';
      }
      $('ol#posts').html(html);
      $('.post').mouseenter(function() {
        post = data.posts[$(this).attr('data-index')];
        html = '';
        for(i=0; i<post.bu_photos.length; i++) {
           html += '<a href="pics/' + post.bu_photos[i] + '"><img alt="#' + post.id + ' pic ' + i + 
             '" src="pics/' + post.bu_photos[i] +  '" style="height: 200px"></a>' ;
        }
        $(this).find('div.photos').html(html);
        $(this).find('div.photos').slideDown();
      });
      $('.post').mouseleave(function() {
        $(this).find('div.photos').slideUp();
        $(this).find('div.photos').html('');
      });
    });
  </script>
</head><body>
  <h1>Tumblr Backup</h1>
  <div id="log"> </div>
  <h2>Posts</h2>
  <ol id="posts"></ol>
</body></html>